Feat(#65): add status chart

[mari1912]

Description

• Add status chart component
• Add status chart to a card

Related Issues

• Closes Create Status Chart component #65

How to test it

I was having a lot of trouble to connect mui-x-charts with storybook, so I was testing trying to put it in the dashboard. It is possible to test it by replacing the Dashboard HTML for:

<div className="w-full h-full">
      <div className="flex flex-row w-full justify-between">
        <SideMenu />
        <TopBar onChangeInputText={onInputSearchTextChange} />
        <div className='flex flex-col w-full gap-12'>
        <div className="w-full px-16 pt-24 bg-lightGray">
          <TreeListingPage inputFilter={debouncedInput} />
        </div>
        <StatusChartCard title='title test' chart={{
          greenElement:{label: "Success", value: 12, color: "green"},
          redElement: {label: "failed", value: 12, color:"darkRed"},
          yellowElement: {label: "warning", value: 12, color:"yellow"},
          grayElement: {label: "neutral", value: 50, color: "mediumGray"},
          decreaseElement: {label: "Solved", value:18},
          increaseElement: {label: "Regressions", value:51}
        }}/>
        </div>
      </div>
    </div>

Visual reference

[lfjnascimento]

This PR broke storybook, can you give a look on that?

[lfjnascimento]

This worries me, do we have a ticket to checkout it out latter?

[mari1912]

I can create one

[lfjnascimento]

would be hard to memoize the cards array?

[mari1912]

done