@pablo-amberflo/ui-kit-test/dist/es/molecules.js

Amberflo UI Kit

import o from"react";import{Chart as e,CategoryScale as r,LinearScale as t,BarElement as a,Title as c,Tooltip as l,Legend as n}from"chart.js";import{Bar as s}from"react-chartjs-2";import{Paper as d}from"@mui/material";e.register(r,t,a,c,l,n);const i=o=>{const e=o.toString().split(".")[1],r=e&&e.length>2?e.length:2;return parseFloat(o).toFixed(r)},g={responsive:!0,indexAxis:"y",plugins:{title:{display:!0,text:"Usage by dimensions",position:"top",fullSize:!0,font:{color:"#212121",size:16},padding:{bottom:50}},legend:{position:"bottom",labels:{boxWidth:7,usePointStyle:!0,pointStyle:"circle",color:"#212121",padding:20,font:{size:14}}}},scales:{y:{beginAtZero:!0,grid:{color:"#cccccc",borderDash:[4,4]},stacked:!0,ticks:{color:"#212121",font:{size:14},callback:o=>0!==Math.floor(o)?`$${i(o)}`:o}},x:{stacked:!0,grid:{color:"transparent"},ticks:{color:"black",font:{size:14}}}}},b={labels:["08/01","08/02","08/03"],datasets:[{label:"us-east-1",backgroundColor:"#55BDC5",borderColor:"#55BDC5",hoverBackgroundColor:"#55BDC5",hoverBorderColor:"#55BDC5",barPercentage:.7,categoryPercentage:.3,data:[1200,1500,2e3]},{label:"us-east-2",backgroundColor:"#4D49CB",borderColor:"#4D49CB",hoverBackgroundColor:"#4D49CB",hoverBorderColor:"#4D49CB",barPercentage:.7,categoryPercentage:.3,data:[900,800,1222]},{label:"us-west-1",backgroundColor:"#DC8B39",borderColor:"#DC8B39",hoverBackgroundColor:"#DC8B39",hoverBorderColor:"#DC8B39",barPercentage:.7,categoryPercentage:.3,data:[650,700,890]},{label:"us-west-2",backgroundColor:"#ca03fc",borderColor:"#ca03fc",hoverBackgroundColor:"#ca03fc",hoverBorderColor:"black",barPercentage:.7,categoryPercentage:.3,data:[650,700,890]}]},C=e=>{const{options:r,data:t}=e;return o.createElement("div",{style:{padding:"4rem"}},o.createElement(d,{style:{padding:"2rem 2rem 1rem 2rem",boxShadow:"rgba(0, 0, 0, 0.24) 0px 3px 8px"}},o.createElement(s,{options:r||g,data:t||b})))};export{C as BarGraph,i as addZeroAfterDecimal};