scenario targets line and bar chart
Thu Mar 24 2022 10:16:41 GMT+0000 (Coordinated Universal Time)
Saved by @jacopo #javascript
import React from "react"; import { Bar } from "react-chartjs-2"; import { useParams } from "react-router-dom"; import useFetch from "../../hooks/useFetch"; import Spinner from "../../shared/Spinner"; import { optionsReportsComparison } from "../shared/options"; import ChartDataLabels from "chartjs-plugin-datalabels"; const data = { datasets: [ { type: "line", label: "Dataset 1", borderColor: "rgb(255, 99, 132)", data: { 2021: 3, 2022: 2, }, stack: "Scenario - Test analytics - Februaryy", }, { type: "bar", label: "Dataset 2", backgroundColor: "rgb(75, 192, 192)", data: { 2021: 1.25, 2022: 1.25, }, stack: "Scenario - Test analytics - February", }, ], }; const ScenarioTargets = () => { const { reportPk } = useParams(); // const { data } = useFetch(`/api/analytics/get-scenario-target-chart/${reportPk}/?model-name=scope_fk&group-by=report`); if (!data) { return <Spinner />; } else { const tweakData = () => data.datasets.map((d) => { d.barPercentage = 0.4; d.categoryPercentage = 0.5; d.borderRadius = 10; if (d.label === "Scope 3") { d.padding = { top: 20 }; d.datalabels = { labels: { report: { backgroundColor: "white", borderRadius: 4, borderWidth: 1, borderColor: "#4a5568", padding: { top: 2, bottom: 2, left: 4, right: 4, }, offset: 4, align: "end", anchor: "end", color: "#4a5568", font: { size: 10 }, formatter: function (value, ctx) { return ctx.dataset.info; }, }, }, }; } }); tweakData(); // const tweakData = () => // data.datasets.map((d) => { // d.barThickness = 30; // d.borderRadius = 10; // delete d.stack; // }); // tweakData(); return ( <div className="p-10 bg-white shadow-lg rounded-box"> <h3 className="text-xl uppercase font-bold mb-4 text-gray-700">Scenarios targets</h3> <p className="text-gray-500 mb-20">Evolution of carbon emissions over time to track improvement in your strategy.</p> <div className="flex items-center justify-center"> <Bar options={optionsReportsComparison} data={data} plugins={[ChartDataLabels]} /> </div> </div> ); } }; export default ScenarioTargets;
Comments