Merge pull request #74 from squidit/feature/sq-67531.criar-componente-de-melhorias-dias-e-horarios

✨ feat: SQ-67531 Criar componente de Melhorias dias e horários

Author: wandersonsales-dev

package.json

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

src/components/index.ts

@@ -55,3 +55,4 @@ export * from './sq-modal-profile-cache'
 export * from './sq-modal-footer'
 export * from './sq-card-profile'
 export * from './sq-form-profile-cache'
+export * from './sq-average-engagement-chart'

src/components/sq-average-engagement-chart/__docs__/average-engagement-chart.component.example.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import SqAverageEngagementChart, { Props } from '../average-engagement-chart.component'
+
+const SqAverageEngagementChartExample = (props: Props) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100%',
+        width: '600px',
+      }}
+    >
+      <SqAverageEngagementChart {...props} />
+    </div>
+  )
+}
+
+export default SqAverageEngagementChartExample

src/components/sq-average-engagement-chart/__docs__/average-engagement-chart.component.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react'
+import SqAverageEngagementChartExample from './average-engagement-chart.component.example'
+
+const meta: Meta<typeof SqAverageEngagementChartExample> = {
+  title: 'Components/SqAverageEngagementChart',
+  parameters: {
+    docs: {
+      description: {
+        component: 'A simple Average Engagement Chart component',
+      },
+    },
+  },
+  component: SqAverageEngagementChartExample,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SqAverageEngagementChartExample>
+
+export const Default: Story = {
+  args: {
+    dataSet: [
+      [1, 2, 3, 4, 5, 6, 7, 8],
+      [8, 9, 10, 11, 12, 13, 14, 15],
+      [15, 16, 17, 18, 19, 20, 21, 22],
+      [22, 23, 24, 25, 26, 27, 28, 29],
+      [29, 30, 31, 32, 33, 34, 35, 36],
+      [36, 37, 38, 39, 40, 41, 42, 43],
+      [43, 44, 45, 46, 47, 48, 49, 30],
+    ],
+  },
+}

src/components/sq-average-engagement-chart/average-engagement-chart.component.scoped.scss

@@ -0,0 +1,54 @@
+.engagement-chart {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  tr td {
+    word-break: break-all;
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+  }
+
+  td {
+    font-size: 0.9rem;
+    font-weight: bold;
+    text-align: center;
+    color: var(--text_color);
+    border-radius: 50%;
+
+    @media (max-width: 576px) {
+      font-size: 0.8rem;
+    }
+  }
+
+  .engagement-chart-values {
+    position: relative;
+    border-spacing: 2px;
+    border-collapse: initial;
+    width: 100%;
+
+    tbody {
+      max-width: 100%;
+      width: 100%;
+
+      td {
+        .element-value {
+          width: 100%;
+          aspect-ratio: 1 / 1;
+          padding: 0 0.75rem;
+          border-radius: 50%;
+          margin: 0 auto;
+        }
+      }
+    }
+
+    tfoot,
+    tfoot th,
+    tfoot td {
+      position: sticky;
+      bottom: 0;
+      color: var(--text_color);
+    }
+  }
+}

src/components/sq-average-engagement-chart/average-engagement-chart.component.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import './average-engagement-chart.component.scoped.scss'
+import SqObjectHelper from '@/src/helpers/sq-object/sq-object.helper'
+import { SqNumbersHelper } from '@/src/helpers'
+import i18n from '@/src/i18n'
+
+interface Day {
+  value: number
+  percentage: number
+}
+
+export interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  dataSet: number[][]
+  color?: string
+}
+
+const MIN_OPACITY = 0.2
+
+export default function AverageEngagementChart({ dataSet, color = 'blue', className = '', ...props }: Props) {
+  const tableElement = React.useRef<HTMLTableElement>(null)
+
+  const sqNumberHelper = useMemo(() => new SqNumbersHelper(), [])
+
+  /* Local variables */
+  const timestamp = `random-id-${(1 + Date.now() + Math.random()).toString().replace('.', '')}`
+  const weekdays = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
+  const hours = ['00h', '03h', '06h', '09h', '12h', '15h', '18h', '21h']
+
+  const [data, setData] = useState<Day[][]>([])
+
+  const { t } = useTranslation('averageEngagementChart')
+
+  const setOpacity = useCallback(
+    (value: number) => {
+      const dataFlatted: number[] = dataSet?.flatMap((week) => week)
+      const biggestValue: number = Math.max(...dataFlatted)
+
+      if (value < MIN_OPACITY || value === null) {
+        return MIN_OPACITY
+      }
+
+      if (value === biggestValue) {
+        return 1
+      }
+
+      const percentageValue: number = (value * 100) / biggestValue / 100
+
+      return percentageValue * (1 - MIN_OPACITY) + MIN_OPACITY
+    },
+    [dataSet],
+  )
+
+  useEffect(() => {
+    const processDataSet = () => {
+      const dataMapped = dataSet.map(
+        (week) =>
+          week?.map((value) => ({
+            value: value,
+            percentage: setOpacity(value),
+          })),
+      )
+
+      setData(dataMapped)
+    }
+
+    processDataSet()
+  }, [dataSet, setOpacity])
+
+  useEffect(() => {
+    const table = tableElement?.current
+    if (!table) return
+
+    const rows = table.rows
+
+    if (table.tHead) {
+      table.tHead.remove()
+    }
+
+    // add a label to all rows
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i]
+      const label = weekdays[i]
+      const labelCell = row.insertCell(0)
+      labelCell.innerHTML = t(label)
+    }
+
+    // check if table has tfoot and remove it
+    if (table.tFoot) {
+      table.tFoot.remove()
+    }
+
+    // add a tfoot with the hours skipping the first cell
+    const tfoot = table.createTFoot()
+    const tfootRow = tfoot.insertRow()
+    tfootRow.insertCell()
+    for (const element of hours) {
+      const cell = tfootRow.insertCell()
+      cell.innerHTML = element
+    }
+  }, [data, t, weekdays, hours])
+
+  return (
+    <div className={`engagement-chart ${className}`} {...props}>
+      <table border={0} cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
+        <tbody>
+          <tr>
+            <td>
+              <table className="engagement-chart-values" ref={tableElement} id={timestamp} key={timestamp}>
+                <tbody>
+                  {data?.map((week, index) => (
+                    <tr key={index}>
+                      {week?.map((obj, i) => (
+                        <td key={i}>
+                          <div
+                            className={`element-value background-${color}`}
+                            style={{ opacity: obj?.percentage }}
+                            data-tooltip={`${t('averageEngagement')}: ${sqNumberHelper?.formatStandardNumber({
+                              lang: i18n?.language,
+                              number: obj?.value,
+                            })}`}
+                          ></div>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}

src/components/sq-average-engagement-chart/index.ts

@@ -0,0 +1 @@
+export { default as SqAverageEngagementChart } from './average-engagement-chart.component'

src/components/sq-average-engagement-chart/locales/en.json

@@ -0,0 +1,10 @@
+{
+  "monday": "Mon",
+  "tuesday": "Tue",
+  "wednesday": "Wed",
+  "thursday": "Thu",
+  "friday": "Fri",
+  "saturday": "Sat",
+  "sunday": "Sun",
+  "averageEngagement": "Engajamento médio"
+}

src/components/sq-average-engagement-chart/locales/es.json

@@ -0,0 +1,10 @@
+{
+  "monday": "Lun",
+  "tuesday": "Mar",
+  "wednesday": "Mié",
+  "thursday": "Jue",
+  "friday": "Vie",
+  "saturday": "Sáb",
+  "sunday": "Dom",
+  "averageEngagement": "Engagement promedio"
+}

src/components/sq-average-engagement-chart/locales/pt.json

@@ -0,0 +1,10 @@
+{
+  "monday": "Seg",
+  "tuesday": "Ter",
+  "wednesday": "Qua",
+  "thursday": "Qui",
+  "friday": "Sex",
+  "saturday": "Sáb",
+  "sunday": "Dom",
+  "averageEngagement": "Engajamento médio"
+}

src/i18n.ts

@@ -59,6 +59,9 @@ import esSqModalProfileCache from '@components/sq-modal-profile-cache/locales/es
 import ptSqInputBirthdaySimple from '@components/inputs/sq-input-birthday-simple/locales/pt.json'
 import esSqInputBirthdaySimple from '@components/inputs/sq-input-birthday-simple/locales/es.json'
 import enSqInputBirthdaySimple from '@components/inputs/sq-input-birthday-simple/locales/en.json'
+import ptAverageEngagementChart from '@components/sq-average-engagement-chart/locales/pt.json'
+import enAverageEngagementChart from '@components/sq-average-engagement-chart/locales/en.json'
+import esAverageEngagementChart from '@components/sq-average-engagement-chart/locales/es.json'
 
 const getResources = () => ({
   en: {
@@ -78,6 +81,7 @@ const getResources = () => ({
     sqInsufficientData: enSqInsufficientData,
     sqModalProfileCache: enSqModalProfileCache,
     sqInputBirthdaySimple: enSqInputBirthdaySimple,
+    averageEngagementChart: enAverageEngagementChart,
   },
   pt: {
     globals: ptGlobals,
@@ -96,6 +100,7 @@ const getResources = () => ({
     sqInsufficientData: ptSqInsufficientData,
     sqModalProfileCache: ptSqModalProfileCache,
     sqInputBirthdaySimple: ptSqInputBirthdaySimple,
+    averageEngagementChart: ptAverageEngagementChart,
   },
   es: {
     globals: esGlobals,
@@ -114,6 +119,7 @@ const getResources = () => ({
     sqInsufficientData: esSqInsufficientData,
     sqModalProfileCache: esSqModalProfileCache,
     sqInputBirthdaySimple: esSqInputBirthdaySimple,
+    averageEngagementChart: esAverageEngagementChart,
   },
 })
 
@@ -179,6 +185,7 @@ i18n
       'sqModalWelcomeCreatorsInsights',
       'sqGroupVerticalBarChart',
       'sqInputBirthdaySimple',
+      'averageEngagementChart',
     ],
     load: 'all',
     supportedLngs: ['en', 'pt', 'es'],