add changes

src/components/graph/ChartView.ts

@@ -2,4 +2,8 @@ import styled from "styled-components"
 
 export const ChartView = styled.div`
   width: 80%;
+
+  @media (max-width: 900px) {
+    min-width: 20rem
+  }
 `

src/components/graph/LineBarChart.tsx

@@ -0,0 +1,95 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  Chart as ChartJS,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip,
+} from 'chart.js';
+import { Chart } from 'react-chartjs-2';
+import faker from 'faker';
+import { ChartView } from './ChartView';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip
+);
+
+const labels = ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line' as const,
+      label: 'Dataset 1',
+      borderColor: '#C2D5FB',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })),
+    },
+    {
+      type: 'bar' as const,
+      label: 'Dataset 3',
+      backgroundColor: '#255488',
+      data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })),
+    },
+  ],
+};
+
+function triggerTooltip(chart: ChartJS | null) {
+  const tooltip = chart?.tooltip;
+
+  if (!tooltip) {
+    return;
+  }
+
+  if (tooltip.getActiveElements().length > 0) {
+    tooltip.setActiveElements([], { x: 0, y: 0 });
+  } else {
+    const { chartArea } = chart;
+
+    tooltip.setActiveElements(
+      [
+        {
+          datasetIndex: 0,
+          index: 2,
+        },
+        {
+          datasetIndex: 1,
+          index: 2,
+        },
+      ],
+      {
+        x: (chartArea.left + chartArea.right) / 2,
+        y: (chartArea.top + chartArea.bottom) / 2,
+      }
+    );
+  }
+
+  chart.update();
+}
+
+export function LineBarChart() {
+  const chartRef = useRef<ChartJS>(null);
+
+  useEffect(() => {
+    const chart = chartRef.current;
+
+    triggerTooltip(chart);
+  }, []);
+
+  return (
+    <ChartView>
+      <Chart ref={chartRef} type='bar' data={data} />
+    </ChartView>
+  )
+}

src/components/header/HeaderView.ts

@@ -57,4 +57,9 @@ export const HeaderView = styled.header`
       width: 50%;
     }
   }
+  @media (max-width: 1640px) {
+    input {
+      height: 2rem;
+    }
+  }
 `

src/pages/pld/index.tsx

@@ -13,6 +13,7 @@ import Chart from '../../components/graph/Chart';
 import PageTitle from '../../components/pageTitle/PageTitle';
 import Link from 'next/link';
 import LineChart from '../../components/graph/LineChart';
+import { LineBarChart } from '../../components/graph/LineBarChart';
 
 export default function region() {
   const router = useRouter()
@@ -230,7 +231,7 @@ export default function region() {
             <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
             <BasicButton title='Download (csv)' />
           </section>
-          <Chart title='' />
+          <LineBarChart />
         </PldGraphView>
       </RenderIf>
 

src/pages/telemetria.tsx

@@ -82,7 +82,7 @@ export default function Telemetria() {
         </Select>
       </FormControl>
 
-      <FormControl  size="small" sx={{ width: 280, mt:10 , pl:5}} >
+      <FormControl  size="small" sx={{ width: 280, mt:10 , pl:5, ml: 2}} >
       <p className='title'>Discretização</p>
         <Select
           value={age}

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -26,7 +26,6 @@ export const TelemetriaView = styled.main`
     font-family: Inter;
     font-size: 14px;
     font-weight: 600;
-
   }
 
 

src/styles/layouts/pld/PldView.ts

@@ -168,6 +168,7 @@ export const PldGraphView = styled.main`
 
     :first-child {
       justify-content: space-around;
+      margin-bottom: 50px;
     }
     :nth-child(2) {
       margin-top: 50px;