Se agregan 2 reportes para direccion

package.json

@@ -20,7 +20,9 @@
     "axios": "^0.26.0",
     "bootstrap": "^5.1.3",
     "btoa": "^1.2.1",
+    "chart.js": "^4.3.0",
     "env-cmd": "^10.1.0",
+    "faker": "^6.6.6",
     "file-saver": "^2.0.5",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
@@ -30,6 +32,7 @@
     "react-apexcharts": "^1.4.0",
     "react-bootstrap": "^2.2.0",
     "react-captchaa": "^1.0.13",
+    "react-chartjs-2": "^5.2.0",
     "react-currency-format": "^1.1.0",
     "react-data-export": "^0.6.0",
     "react-data-table-component": "^7.5.2",
@@ -41,6 +44,7 @@
     "react-dropdown-select": "^4.9.0",
     "react-dropzone": "^14.2.1",
     "react-flexy-table": "^1.8.10",
+    "react-google-charts": "^4.0.0",
     "react-google-qrcode": "^1.0.3",
     "react-grid-data": "^1.1.5",
     "react-icons": "^4.3.1",
@@ -50,7 +54,9 @@
     "react-router-dom": "6",
     "react-scripts": "5.0.0",
     "react-to-print": "^2.14.7",
+    "react-vis": "^1.12.1",
     "react-webcam-qr-scanner.ts": "^1.0.4",
+    "recharts": "^2.7.2",
     "redux": "^4.1.2",
     "redux-starter-kit": "^2.0.0",
     "string-hex": "^1.0.0",

src/Components/Dashboard/Dashboard.tsx

@@ -45,7 +45,7 @@ export default function Dashboard(props: IProps) {
           {[['Direcccion', 'Sistemas', 'Operaciones', 'Trafico'].includes(Depto) ? <DashboardTrafico /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
-          {[['Direccion', 'Sistemas'].includes(User) ? <DashboardDireccion /> : ''].map((item) => {
+          {[['Direccion', 'Sistemas'].includes(Depto) ? <DashboardDireccion /> : ''].map((item) => {
             return <React.Fragment>{item}</React.Fragment>
           })}
         </Row>

src/Components/Dashboard/DashboardCorresponsales.tsx

@@ -13,7 +13,6 @@ export default function DashboardCorresponsales(props: IProps) {
   const [TotalCorresponsales, setTotalCorresponsales] = useState(0);
   const [labels, setlabels] = useState<string[]>([]);
   const [series, setseries] = useState<number[]>([]);
-  //const [TipoCambio, setTipoCambio] = useState(0)
   const [CircleOptions, setCirleOpcions] = useState<ApexOptions>({
     labels: [
       '(2) Rechazos para el corresponsal',
@@ -77,24 +76,8 @@ export default function DashboardCorresponsales(props: IProps) {
       .catch((e: Error) => {
         return;
       });
-    //getTipoCambio(currentDate())
   }, []);
 
-  function ConvertStringToHex(str: string) {
-    var arr = [];
-    for (var i = 0; i < str.length; i++) {
-      arr[i] = ('00' + str.charCodeAt(i).toString(16)).slice(-4);
-    }
-    return '\\u' + arr.join('\\u');
-  }
-
-  function currentDate(): string {
-    var today = new Date();
-    var dd = String(today.getDate()).padStart(2, '0');
-    var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
-    var yyyy = today.getFullYear();
-    return yyyy + '-' + mm + '-' + dd;
-  }
 
   return (
     <>

src/Components/Dashboard/DashboardDireccion.tsx

@@ -1,50 +1,569 @@
 import React, { FC, useEffect, useState } from 'react'
 import { Card, Col, Container, Row } from 'react-bootstrap'
-import { IconContext } from 'react-icons'
-import { BsCashCoin } from 'react-icons/bs'
 import { Link } from 'react-router-dom'
-import DashboardDataService from '../../Services/Dashboard/Dashboard.Contabilidad.Service'
+import DashboardDS from '../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+import DTOPedimentosCruzadosListaCliente from '../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  ComposedChart,
+  Bar
+} from 'recharts'
+import { Chart } from 'react-google-charts'
+
+import {
+  Chart as ChartJS,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend as Legend6,
+  Tooltip as Tooltip6,
+  LineController,
+  BarController
+} from 'chart.js'
+import { Chart as Chart6 } from 'react-chartjs-2'
 
 interface IProps {}
 
+interface IRechartsData {
+  name: string
+  uv: number
+  pv: number
+  amt: number
+}
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend6,
+  Tooltip6,
+  LineController,
+  BarController
+)
+
 const DashboardDireccion: FC<IProps> = (props) => {
-  const [CTCTotal, setCTCTotal] = useState(0) // Corresponsales: Traficos terminados listos para contabilidad
-  const [CAPATotal, setCAPATotal] = useState(0) // Corresponsales anticipos pendientes de autorizar
-  const [CuentasComplementariasPedientes, setCuentasComplementariasPendientes] = useState(0) // Corresponsales anticipos pendientes de autorizar
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [series, setSeries] = useState([
+    {
+      type: 'line', //render a line chart for this data
+      name: 'Pedimentos',
+      data: [19, 22, 20, 26]
+    },
+    {
+      type: 'column', //use column chart here.
+      name: 'Cruces',
+      data: [103, 105, 98, 83]
+    }
+  ])
+  const [options, setOptions] = useState<ApexOptions>({
+    xaxis: {
+      categories: ['2022', '20022', '2023', '2023']
+    },
+    chart: {
+      height: 100,
+      type: 'line',
+      zoom: {
+        enabled: false
+      }
+    }
+  })
+  const [series2, setSeries2] = useState([
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100]
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41]
+    }
+  ])
+  const [options2, setOptions2] = useState<ApexOptions>({
+    chart: {
+      height: 350,
+      type: 'area'
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      curve: 'smooth'
+    },
+    xaxis: {
+      categories: ['Ene', 'Feb', 'Mar', 'Abr', 'Marzo', 'Abr', 'May']
+    }
+  })
+  const [series3, setSeries3] = useState([
+    {
+      name: 'series1',
+      data: [31, 40, 28, 51, 42, 109, 100]
+    },
+    {
+      name: 'series2',
+      data: [11, 32, 45, 32, 34, 52, 41]
+    }
+  ])
+  const [options3, setOptions3] = useState<ApexOptions>({
+    chart: {
+      type: 'bar',
+      height: 350
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '55%'
+      }
+    },
+    dataLabels: {
+      enabled: false
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent']
+    },
+    xaxis: {
+      categories: [
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct'
+      ]
+    },
+    yaxis: {
+      title: {
+        text: '$ (thousands)'
+      }
+    },
+    fill: {
+      opacity: 1
+    },
+    tooltip: {
+      y: {
+        formatter: function (val) {
+          return '$ ' + val + ' thousands'
+        }
+      }
+    }
+  })
+  const [data4, setData4] = useState<IRechartsData[]>([
+    {
+      name: 'Page A',
+      uv: 4000,
+      pv: 2400,
+      amt: 2400
+    },
+    {
+      name: 'Page B',
+      uv: 3000,
+      pv: 1398,
+      amt: 2210
+    },
+    {
+      name: 'Page C',
+      uv: 2000,
+      pv: 9800,
+      amt: 2290
+    }
+  ])
+  const [data5, setData5] = useState([
+    ['Mes', 'Pedimentos', 'Cruces'],
+    ['2004/05', 165, 938],
+    ['2005/06', 135, 1120],
+    ['2006/07', 157, 1167],
+    ['2007/08', 139, 1110],
+    ['2008/09', 136, 691]
+  ])
+  const options5 = {
+    title: '',
+    vAxis: { title: '' },
+    hAxis: { title: 'Meses' },
+    seriesType: 'bars',
+    series: { 1: { type: 'line' } },
+    colors: ['#1850D0', '70D63E']
+  }
+  const [data6, setData6] = useState({
+    labels: ['January', 'February', 'March'],
+    datasets: [
+      {
+        type: 'line' as const,
+        label: 'Pedimentos',
+        borderColor: '#1850D0',
+        borderWidth: 2,
+        fill: false,
+        data: [1, 2, 3]
+      },
+      {
+        type: 'bar' as const,
+        label: 'Cruces',
+        backgroundColor: '#70D63E',
+        data: [8, 9, 10],
+        borderColor: 'white',
+        borderWidth: 2
+      }
+    ]
+  })
+
+  const options6 = {
+    indexAxis: 'x' as const,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true
+  }
 
   useEffect(() => {
-    DashboardDataService.getTotalTraficosPendientesAutorizar(5)
+    DashboardDS.GETPedimentosCruzadosListaCliente()
       .then((response) => {
-        setCTCTotal(response.data.total)
+        setClientes(response.data)
       })
       .catch((e: Error) => {
         return
       })
   }, [])
 
+  useEffect(() => {
+    if (Clientes.length > 0) setCustomer()
+  }, [Clientes])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        let RechartsData: IRechartsData[] = []
+        let RGoogleChartData: Array<Array<string | number>> = []
+        RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+          RechartsData.push({
+            name: item.sMes,
+            pv: item.pedimentos,
+            uv: item.despachos,
+            amt: 1
+          })
+          RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+        })
+        setData6({
+          labels: Categorias,
+          datasets: [
+            {
+              type: 'line' as const,
+              label: 'Pedimentos',
+              borderColor: '#1850D0',
+              borderWidth: 2,
+              fill: false,
+              data: Pedimentos
+            },
+            {
+              type: 'bar' as const,
+              label: 'Cruces',
+              backgroundColor: '#70D63E',
+              data: Cruces,
+              borderColor: 'white',
+              borderWidth: 2
+            }
+          ]
+        })
+        setData5(RGoogleChartData)
+        setData4(RechartsData)
+        setSeries([
+          {
+            type: 'line', //render a line chart for this data
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            type: 'column', //use column chart here.
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          }
+        })
+
+        setSeries2([
+          {
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions2({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          }
+        })
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  const setCustomer = () => {
+    console.log('entro al proceso de set customer')
+    let idx = Math.floor(Math.random() * Clientes.length)
+    for (var c = 0; c < Clientes.length; c++) {
+      if (idx == c) {
+        setIDCliente(Clientes[idx].id)
+        setCliente(Clientes[idx].razonSocial)
+        break
+      }
+    }
+  }
+
   return (
     <>
       <Col>
-        <Card style={{ width: '18rem' }} className='dashboardComponentFont'>
-          <Card.Header>Facturacion</Card.Header>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '0px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <Chart6
+                type="bar"
+                data={data6}
+                options={options6}
+                width="30%"
+                height="25%"
+              />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces01"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options} series={series} />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptPedimentosCruces02"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options2} series={series2} type="area" />
+            </div>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptCorresponsalesTraficos?proc=3&modo=1"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
           <Card.Body style={{ paddingBottom: '50px' }}>
             <Card.Title>
-              Traficos pendientes
+              {Cliente}
               <br />
               <br />
             </Card.Title>
-            <Card.Img variant='top' src='' onClick={() => {}} />
-            <div style={{ fontSize: '6em' }} className='text-center'>
-              <IconContext.Provider value={{ color: 'green', size: '35%' }}>
-                <BsCashCoin />
-              </IconContext.Provider>
-              &nbsp;{CTCTotal}
+            <div style={{ fontSize: '6em' }} className="text-center">
+              <ReactApexChart options={options2} series={series2} type="bar" />
             </div>
           </Card.Body>
           <Card.Footer style={{ paddingRight: '5px' }}>
             <Link
-              to='../RptCorresponsalesTraficos?proc=3&modo=1'
-              style={{ textDecoration: 'none', float: 'right', paddingRight: '10px' }}
+              to="../RptCorresponsalesTraficos?proc=3&modo=1"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <ComposedChart
+              width={250}
+              height={170}
+              data={data4}
+              margin={{
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+              }}
+            >
+              <CartesianGrid stroke="#f5f5f5" />
+              <XAxis dataKey="name" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="pv" barSize={20} fill="#1850D0" name="Pedimentos" />
+              <Line
+                type="monotone"
+                dataKey="uv"
+                stroke="#70D63E"
+                name="Cruces"
+              />
+            </ComposedChart>
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptCorresponsalesTraficos?proc=3&modo=1"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
+            >
+              Ver mas...
+            </Link>
+          </Card.Footer>
+        </Card>
+      </Col>
+      <Col>
+        <Card style={{ width: '18rem' }} className="dashboardComponentFont">
+          <Card.Header style={{ backgroundColor: '#1D6DC2', color: '#ffffff' }}>
+            Dirección
+          </Card.Header>
+          <Card.Body style={{ paddingBottom: '50px' }}>
+            <Card.Title>
+              {Cliente}
+              <br />
+              <br />
+            </Card.Title>
+            <Chart
+              chartType="ComboChart"
+              width="100%"
+              height="170px"
+              data={data5}
+              options={options5}
+            />
+          </Card.Body>
+          <Card.Footer style={{ paddingRight: '5px' }}>
+            <Link
+              to="../RptCorresponsalesTraficos?proc=3&modo=1"
+              style={{
+                textDecoration: 'none',
+                float: 'right',
+                paddingRight: '10px'
+              }}
             >
               Ver mas...
             </Link>

src/Components/Reportes/Direccion/RptPedimentosCruces01.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import { Card, Form } from 'react-bootstrap'
+import { Chart } from 'react-chartjs-2'
+
+export interface IRptPedimentosCruces01Props {}
+
+export default function RptPedimentosCruces01(
+  props: IRptPedimentosCruces01Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [data6, setData6] = useState({
+    labels: ['January', 'February', 'March'],
+    datasets: [
+      {
+        type: 'line' as const,
+        label: 'Pedimentos',
+        borderColor: '#1850D0',
+        borderWidth: 2,
+        fill: false,
+        data: [1, 2, 3]
+      },
+      {
+        type: 'bar' as const,
+        label: 'Cruces',
+        backgroundColor: '#70D63E',
+        data: [8, 9, 10],
+        borderColor: 'white',
+        borderWidth: 2
+      }
+    ]
+  })
+
+  const options6 = {
+    indexAxis: 'x' as const,
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    },
+    responsive: true
+  }
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  /*   useEffect(() => {
+    if (Clientes.length > 0) setCustomer(0)
+  }, [Clientes]) */
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        let RGoogleChartData: Array<Array<string | number>> = []
+        RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces'])
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+          RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos])
+        })
+        setData6({
+          labels: Categorias,
+          datasets: [
+            {
+              type: 'line' as const,
+              label: 'Pedimentos',
+              borderColor: '#1850D0',
+              borderWidth: 2,
+              fill: false,
+              data: Pedimentos
+            },
+            {
+              type: 'bar' as const,
+              label: 'Cruces',
+              backgroundColor: '#70D63E',
+              data: Cruces,
+              borderColor: 'white',
+              borderWidth: 2
+            }
+          ]
+        })
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <Chart
+            type="bar"
+            data={data6}
+            options={options6}
+            width="100%"
+            height="42%"
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/Components/Reportes/Direccion/RptPedimentosCruces02.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from 'react'
+import { Card, Form } from 'react-bootstrap'
+import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente'
+import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData'
+import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services'
+import ReactApexChart from 'react-apexcharts'
+import { ApexOptions } from 'apexcharts'
+
+export interface IRtpPedimentosCruces02Props {}
+
+export default function RtpPedimentosCruces02(
+  props: IRtpPedimentosCruces02Props
+) {
+  const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>(
+    []
+  )
+  const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([])
+  const [Cliente, setCliente] = useState('')
+  const [IDCliente, setIDCliente] = useState(0)
+  const [Pedimentos, setPedimentos] = useState<number[]>([])
+  const [Cruces, setCruces] = useState<number[]>([])
+  const [series, setSeries] = useState([
+    {
+      type: 'line', //render a line chart for this data
+      name: 'Pedimentos',
+      data: [19, 22, 20, 26]
+    },
+    {
+      type: 'column', //use column chart here.
+      name: 'Cruces',
+      data: [103, 105, 98, 83]
+    }
+  ])
+  const [options, setOptions] = useState<ApexOptions>({
+    xaxis: {
+      categories: ['2022', '20022', '2023', '2023']
+    },
+    chart: {
+      height: 100,
+      type: 'line',
+      zoom: {
+        enabled: false
+      }
+    }
+  })
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosListaCliente()
+      .then((response) => {
+        setClientes(response.data)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [])
+
+  useEffect(() => {
+    DashboardDS.GETPedimentosCruzadosData(IDCliente)
+      .then((response) => {
+        setData(response.data)
+        let Pedimentos: number[] = []
+        let Cruces: number[] = []
+        let Categorias: string[] = []
+        response.data.forEach(function (item) {
+          Pedimentos.push(item.pedimentos)
+          Cruces.push(item.despachos)
+          Categorias.push(item.sMes)
+        })
+        setSeries([
+          {
+            type: 'line', //render a line chart for this data
+            name: 'Pedimentos',
+            data: Pedimentos
+          },
+          {
+            type: 'column', //use column chart here.
+            name: 'Cruces',
+            data: Cruces
+          }
+        ])
+        setOptions({
+          xaxis: {
+            categories: Categorias
+          },
+          chart: {
+            height: 100,
+            type: 'line',
+            zoom: {
+              enabled: false
+            }
+          },
+          dataLabels: {
+            enabled: true,
+            dropShadow: {
+              enabled: true,
+              left: 2,
+              top: 2,
+              opacity: 0.5
+            }
+          },
+          grid: {
+            position: 'front',
+            borderColor: '#AAA',
+            strokeDashArray: 3
+          },
+          legend: {
+            show: true,
+            position: 'top'
+          }
+        })
+        var arrClientes = Clientes.filter((item) => {
+          return item.id == IDCliente
+        })
+        setCliente(arrClientes[0].razonSocial)
+      })
+      .catch((e: Error) => {
+        return
+      })
+  }, [IDCliente])
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Form.Control
+            as="select"
+            onChange={(e) => {
+              setIDCliente(parseInt(e.target.value))
+            }}
+            className="form-select form-select-sm"
+          >
+            <option value="0">Seleccion el cliente</option>
+            {Clientes
+              ? Clientes.map((c) => {
+                  return <option value={c.id}>{c.razonSocial}</option>
+                })
+              : null}
+          </Form.Control>
+        </Card.Body>
+      </Card>
+      <br />
+      <Card>
+        <Card.Body>
+          <Card.Title>
+            {Cliente}
+            <br />
+            <br />
+          </Card.Title>
+          <ReactApexChart
+            options={options}
+            series={series}
+            width="100%"
+            height="650px"
+          />
+        </Card.Body>
+      </Card>
+    </div>
+  )
+}

src/DTO/Dashboard/DTOPedimentosCruzadosData.ts

@@ -0,0 +1,9 @@
+export default interface DTOPedimentosCruzadosData {
+  orden: number,
+  mes: number,
+  sMes: string,
+  anio: number,
+  operacion:  number,
+  despachos: number,
+  pedimentos: number 
+}

src/DTO/Dashboard/DTOPedimentosCruzadosListaCliente.ts

@@ -0,0 +1,4 @@
+export default interface DTOPedimentosCruzadosListaCliente {
+  id: number,
+  razonSocial: string
+}

src/Services/Dashboard/Dashboard.Direccion.Services.ts

@@ -1,12 +1,13 @@
 import http from "../common/http-common";
-import IDashboardTotal from "../../Interfaces/IDashboardTotal";
+import DTOPedimentosCruzadosListaCliente from "../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente";
+import DTOPedimentosCruzadosData from "../../DTO/Dashboard/DTOPedimentosCruzadosData";
 
 class Dashboard$Direccion$DataService {
   GETPedimentosCruzadosData(id: number) {
-    return http.get<IDashboardTotal>(`/Direccion/GetPedimentosCrucesData?id=${id}`);
+    return http.get<DTOPedimentosCruzadosData[]>(`/Direccion/GetPedimentosCrucesData?id=${id}`);
   }
   GETPedimentosCruzadosListaCliente() {
-    return http.get<IDashboardTotal>(`/Direccion/GetPedimentosCrucesListaPedimentos`);
+    return http.get<DTOPedimentosCruzadosListaCliente[]>(`/Direccion/GetPedimentosCrucesListaCliente`);
   }
 }
 export default new Dashboard$Direccion$DataService();

src/index.tsx

@@ -53,6 +53,8 @@ import ForgotPassword from './Components/Login/ForgotPassword'
 import PIN from './Components/Login/PIN'
 import RptAmazonFacturasPagadas from './Components/Clientes/Amazon/Reportes/FacturasPagadas/RptAmazonFacturasPagadas'
 import RptPedimentosPagadosFacturasCruzadas from './Components/Reportes/RptPedimentosPagadosFacturasCruzadas'
+import RptPedimentosCruces01 from './Components/Reportes/Direccion/RptPedimentosCruces01'
+import RptPedimentosCruces02 from './Components/Reportes/Direccion/RptPedimentosCruces02'
 
 require(`./css/${process.env.REACT_APP_ENVIRONMENT}-home.css`)
 
@@ -189,6 +191,14 @@ ReactDOM.render(
             <Route
               path="/RptPedimentosPagadosFacturasCruzadas"
               element={<RptPedimentosPagadosFacturasCruzadas />}
+            />
+             <Route
+              path="/RptPedimentosCruces01"
+              element={<RptPedimentosCruces01 />}
+            />
+            <Route
+              path="/RptPedimentosCruces02"
+              element={<RptPedimentosCruces02 />}
             />
             <Route path="*" element={<PageNotFound />} />
           </Route>

yarn.lock

@@ -1120,6 +1120,13 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.1.2":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.17.2"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz"
@@ -1723,6 +1730,11 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2101,6 +2113,57 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.0.5.tgz#857c1afffd3f51319bbc5b301956aca68acaa7b8"
+  integrity sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==
+
+"@types/d3-color@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4"
+  integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.0.tgz#c29926f8b596f9dadaeca062a32a45365681eae0"
+  integrity sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
+  integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b"
+  integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.3.tgz#7a5780e934e52b6f63ad9c24b105e33dd58102b5"
+  integrity sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.1.tgz#15cc497751dac31192d7aef4e67a8d2c62354b95"
+  integrity sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
+  integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.0.tgz#e2505f1c21ec08bda8915238e397fb71d2fc54ce"
+  integrity sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.3"
   resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz"
@@ -3992,6 +4055,13 @@ charcodes@^0.2.0:
   resolved "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
+chart.js@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -4032,6 +4102,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classnames@^2.2.5:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
@@ -4479,6 +4554,11 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -4646,6 +4726,138 @@ cypress@^11.0.1:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+"d3-array@1 - 2":
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+  dependencies:
+    internmap "^1.0.0"
+
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@^3.1.6, d3-array@^3.2.0, d3-array@^3.2.1:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+d3-collection@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e"
+  integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==
+
+"d3-color@1 - 3", d3-color@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.2.tgz#bb92063bc8c5663acb2422f99c73cbb6c6ae3bcc"
+  integrity sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3", d3-format@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+d3-geo@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.1.0.tgz#74fd54e1f4cebd5185ac2039217a98d39b0a4c0e"
+  integrity sha512-JEo5HxXDdDYXCaWdwLRt79y7giK8SbhZJbFWXqbRTolCHFI5jRqteLzCsq51NKbUoX0PjBVSohxrx+NoOUujYA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hexbin@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/d3-hexbin/-/d3-hexbin-0.2.2.tgz#9c5837dacfd471ab05337a9e91ef10bfc4f98831"
+  integrity sha512-KS3fUT2ReD4RlGCjvCEm1RgMtp2NFZumdMu4DBzQK8AZv3fXRM6Xm8I4fSU07UXvH4xxg03NwWKWdvxfS/yc4w==
+
+d3-hierarchy@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@1:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+  integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-sankey@^0.12.3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+  integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+  dependencies:
+    d3-array "1 - 2"
+    d3-shape "^1.2.0"
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^1.2.0:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+  integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+  dependencies:
+    d3-path "1"
+
+d3-shape@^3.1.0, d3-shape@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+d3-voronoi@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"
+  integrity sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==
+
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -4698,6 +4910,11 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 decimal.js@^10.2.1:
   version "10.3.1"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz"
@@ -4893,6 +5110,13 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
@@ -4918,6 +5142,11 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+  integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
@@ -5426,7 +5655,7 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   version "4.0.7"
   resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -5555,11 +5784,21 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.1.tgz#8d172c064867f235c0c84a596806d279bf4bcc07"
   integrity sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==
 
+faker@^6.6.6:
+  version "6.6.6"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-6.6.6.tgz#e9529da0109dca4c7c5dbfeaadbd9234af943033"
+  integrity sha512-9tCqYEDHI5RYFQigXFwF1hnCwcWCOJl/hmll0lr5D2Ljjb0o4wphb69wikeJDz5qCEzXCoPvG6ss5SDP6IfOdg==
+
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
+  integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
+
 fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz"
@@ -5988,6 +6227,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.3.1:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
@@ -6371,6 +6618,16 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
+internmap@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
 invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -7437,7 +7694,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.6.1, lodash@^4.7.0:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.6.1, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7603,6 +7860,13 @@ mimic-fn@^2.1.0:
   resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
+  dependencies:
+    dom-walk "^0.1.0"
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz"
@@ -8086,6 +8350,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+performance-now@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+  integrity sha512-YHk5ez1hmMR5LOkb9iJkLKqoBlL7WD5M8ljC75ZfzXriuBIVNuecaXuU7e+hOwyqf24Wxhh7Vxgt7Hnw9288Tg==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"
@@ -8724,6 +8993,11 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
 promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz"
@@ -8747,7 +9021,7 @@ prop-types-extra@^1.1.0:
     react-is "^16.3.2"
     warning "^4.0.0"
 
-prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8829,7 +9103,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf@^3.4.1:
+raf@^3.1.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -8906,6 +9180,11 @@ react-captchaa@^1.0.13:
   dependencies:
     react-icons-wrapper "^1.0.8"
 
+react-chartjs-2@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d"
+  integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
+
 react-currency-format@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-currency-format/-/react-currency-format-1.1.0.tgz#efef7f18045fc09a987de270b144f5eec8801dab"
@@ -9038,6 +9317,11 @@ react-flexy-table@^1.8.10:
   resolved "https://registry.yarnpkg.com/react-flexy-table/-/react-flexy-table-1.8.10.tgz#8aadc3d15abfa21b3afa2ecd644364d80b404d16"
   integrity sha512-NSPgb1m+kK1O3gMXzLwxR0ZD7jeFjz5nz2ejZDaR9DOMqbkR0PZ+gRjsADsR+gIAfk5v+8xTcY9fsQSMu/EFjw==
 
+react-google-charts@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-google-charts/-/react-google-charts-4.0.0.tgz#f648e4fe8ac8a1f47542c2cac040df6afb21e2d6"
+  integrity sha512-9OG0EkBb9JerKEPQYdhmAXnhGLzOdOHOPS9j7l+P1a3z1kcmq9mGDa7PUoX/VQUY4IjZl2/81nsO4o+1cuYsuw==
+
 react-google-qrcode@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/react-google-qrcode/-/react-google-qrcode-1.0.3.tgz#bb9bb7a1ee1df00a4a296044136738c2a9a0422b"
@@ -9089,7 +9373,7 @@ react-image-loader-hoc@^1.0.6:
     react "^16.6.3"
     styled-components "^4.1.3"
 
-react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.2:
+react-is@^16.10.2, react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.2:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9104,6 +9388,15 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-motion@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
+  integrity sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==
+  dependencies:
+    performance-now "^0.2.0"
+    prop-types "^15.5.8"
+    raf "^3.1.0"
+
 react-number-format@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.1.2.tgz#54feff94d837e67078e234c2950d9a0fb96df3d6"
@@ -9160,6 +9453,13 @@ react-refresh@^0.11.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-resize-detector@^8.0.4:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-8.1.0.tgz#1c7817db8bc886e2dbd3fbe3b26ea8e56be0524a"
+  integrity sha512-S7szxlaIuiy5UqLhLL1KY3aoyGHbZzsTpYal9eYMwCyKqoqoVLCmIgAgNyIM1FhnP2KyBygASJxdhejrzjMb+w==
+  dependencies:
+    lodash "^4.17.21"
+
 react-router-dom@6:
   version "6.2.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz"
@@ -9230,6 +9530,14 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-smooth@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.3.tgz#2845fa8f22914f2e4445856d5688fb8a7d72f3ae"
+  integrity sha512-yl4y3XiMorss7ayF5QnBiSprig0+qFHui8uh7Hgg46QX5O+aRMRKlfGGNGLHno35JkQSvSYY8eCWkBfHfrSHfg==
+  dependencies:
+    fast-equals "^5.0.0"
+    react-transition-group "2.9.0"
+
 react-to-print@^2.14.7:
   version "2.14.7"
   resolved "https://registry.yarnpkg.com/react-to-print/-/react-to-print-2.14.7.tgz#d288de0e573e6e63e203a48d4bad7a1759d18688"
@@ -9237,6 +9545,16 @@ react-to-print@^2.14.7:
   dependencies:
     prop-types "^15.8.1"
 
+react-transition-group@2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
@@ -9247,6 +9565,29 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-vis@^1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/react-vis/-/react-vis-1.12.1.tgz#2020c6025ceb10eace53d2366a6b8e9d90a47c54"
+  integrity sha512-vH7ihTPlBD6wBuzwPoipheyJnx46kKKMXnVqdk4mv5vq+bJVC6JRYdRZSofa2030+kko99rSq/idnYnNWGr6zA==
+  dependencies:
+    d3-array "^3.2.1"
+    d3-collection "^1.0.7"
+    d3-color "^3.1.0"
+    d3-contour "^4.0.0"
+    d3-format "^3.1.0"
+    d3-geo "^3.1.0"
+    d3-hexbin "^0.2.2"
+    d3-hierarchy "^3.1.2"
+    d3-interpolate "^3.0.1"
+    d3-sankey "^0.12.3"
+    d3-scale "^4.0.2"
+    d3-shape "^3.2.0"
+    d3-voronoi "^1.1.4"
+    deep-equal "^1.0.1"
+    global "^4.3.1"
+    prop-types "^15.5.8"
+    react-motion "^0.5.2"
+
 react-webcam-qr-scanner.ts@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/react-webcam-qr-scanner.ts/-/react-webcam-qr-scanner.ts-1.0.4.tgz"
@@ -9300,6 +9641,28 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.7.2.tgz#6d813681910ad33a4bbf3bdd06c6f64f20b39319"
+  integrity sha512-HMKRBkGoOXHW+7JcRa6+MukPSifNtJlqbc+JreGVNA407VLE/vOP+8n3YYjprDVVIF9E2ZgwWnL3D7K/LUFzBg==
+  dependencies:
+    classnames "^2.2.5"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.19"
+    react-is "^16.10.2"
+    react-resize-detector "^8.0.4"
+    react-smooth "^2.0.2"
+    recharts-scale "^0.4.4"
+    reduce-css-calc "^2.1.8"
+    victory-vendor "^36.6.8"
+
 recursive-readdir@^2.2.2:
   version "2.2.2"
   resolved "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz"
@@ -9315,6 +9678,14 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 redux-devtools-extension@^2.13.8:
   version "2.13.9"
   resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz"
@@ -9376,6 +9747,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -10826,6 +11202,26 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+victory-vendor@^36.6.8:
+  version "36.6.11"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.6.11.tgz#acae770717c2dae541a54929c304ecab5ab6ac2a"
+  integrity sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
 voc@:
   version "1.2.0"
   resolved "https://registry.npmjs.org/voc/-/voc-1.2.0.tgz"