diff --git a/src/components/graph/ChartView.ts b/src/components/graph/ChartView.ts index 7df3e4b..110ff26 100644 --- a/src/components/graph/ChartView.ts +++ b/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 + } ` diff --git a/src/components/graph/LineBarChart.tsx b/src/components/graph/LineBarChart.tsx new file mode 100644 index 0000000..945860c --- /dev/null +++ b/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(null); + + useEffect(() => { + const chart = chartRef.current; + + triggerTooltip(chart); + }, []); + + return ( + + + + ) +} diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index d217c5e..bb7156a 100644 --- a/src/components/header/HeaderView.ts +++ b/src/components/header/HeaderView.ts @@ -57,4 +57,9 @@ export const HeaderView = styled.header` width: 50%; } } + @media (max-width: 1640px) { + input { + height: 2rem; + } + } ` diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx index 13672cd..1db412a 100644 --- a/src/pages/pld/index.tsx +++ b/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() { - + diff --git a/src/pages/telemetria.tsx b/src/pages/telemetria.tsx index 645cf34..b0440f8 100644 --- a/src/pages/telemetria.tsx +++ b/src/pages/telemetria.tsx @@ -82,14 +82,14 @@ export default function Telemetria() { - +

Discretização