Merge pull request #28 from squidit/feature/sq-65090-frontend-criar-c…

…omponente-grafico-linhas-horizontal-com-percentual

(SQ-65090) [frontend] Criar componente gráfico linhas horizontal com percentual

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squidit/react-css",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "scripts": {
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
     "lint": "eslint src --ext js,ts,tsx",

src/components/sq-bar-chart-percent/__docs__/sq-bar-chart-percent.component.example.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import SqBarChartPercent, { Props } from '../sq-bar-chart-percent.component'
+
+const SqBarChart = ({ ...props }: Props) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+      }}
+    >
+      <SqBarChartPercent {...props} />
+    </div>
+  )
+}
+
+export default SqBarChart

src/components/sq-bar-chart-percent/__docs__/sq-bar-chart-percent.component.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/react'
+import SqBarChartExample from './sq-bar-chart-percent.component.example'
+
+const meta: Meta<typeof SqBarChartExample> = {
+  title: 'Components/SqBarChartPercent',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple BarChartPercent component',
+      },
+    },
+  },
+  component: SqBarChartExample,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SqBarChartExample>
+
+export const Default: Story = {
+  args: {
+    percentage: true,
+    colorBar: 'var(--primary_color)',
+    label: 'Example',
+    total: 100,
+    value: 75,
+  },
+  argTypes: {
+    colorBar: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+}

src/components/sq-bar-chart-percent/index.ts

@@ -0,0 +1 @@
+export { default as SqBarChartPercent } from './sq-bar-chart-percent.component'

src/components/sq-bar-chart-percent/sq-bar-chart-percent.component.scoped.scss

@@ -0,0 +1,23 @@
+.bar-chart {
+  height: 0.8rem;
+  background-color: var(--gray_light);
+  border-radius: 1rem;
+  display: flex;
+  position: relative;
+
+  .value-bar {
+    position: absolute;
+    background-color: var(--primary_color);
+    border-radius: 1rem;
+    height: 100%;
+    top: 0;
+    left: 0;
+    animation: loadbar 2s ease-in-out;
+  }
+
+  @keyframes loadbar {
+    from {
+      width: 0;
+    }
+  }
+}

src/components/sq-bar-chart-percent/sq-bar-chart-percent.component.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import SqNumbersHelper from '@helpers/sq-numbers/sq-numbers.helper'
+import { useMemo } from 'react'
+
+import './sq-bar-chart-percent.component.scoped.scss'
+
+export interface Props {
+  value: number
+  total: number
+  percentage: boolean
+  colorBar?: string
+  label?: string
+}
+
+const BarChartPercent = ({ value, total, percentage = false, label = '', colorBar = 'var(--primary_color)' }: Props) => {
+  const totalBar = useMemo(() => total || (percentage ? 1 : 100), [percentage, total])
+  const numbersHelper = useMemo(() => new SqNumbersHelper(), [])
+  const { formatPercent } = numbersHelper
+
+  const definePercentage = (value: number, maxValue: number): string => {
+    return `${((value * 100) / maxValue).toFixed(0)}%`
+  }
+
+  const maxNumber = totalBar
+  const widthUserBar = definePercentage(value, maxNumber)
+
+  return (
+    <div>
+      <div className="display-flex justify-content-space-between my-2">
+        <div className="text-bold">{label}</div>
+        <div className="text-bold">{percentage ? formatPercent(value / 100) : value}</div>
+      </div>
+      <div className="bar-chart">
+        <div className="value-bar" style={{ width: widthUserBar, backgroundColor: colorBar }}></div>
+      </div>
+    </div>
+  )
+}
+
+export default BarChartPercent