> For the complete documentation index, see [llms.txt](https://hartans-organization.gitbook.io/hartan-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hartans-organization.gitbook.io/hartan-docs/components/statistics.md).

# Statistics

<figure><img src="https://raw.githubusercontent.com/akkshayTandon/react-hartan/main/images/statistics.png" alt=""><figcaption><p>Preview</p></figcaption></figure>

### Usage

> ```bash
> npm i react-hartan
> ```

```jsx
import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics></Statistics>
    </>
  )
}

export default App
```

### Customization With Props

* `statsBlockData`  -> Accepts an array of objects, where each element has the following structure:

```javascript
{
    head: "", 
    data: "",
}
```

{% hint style="info" %}
NOTE: Keep the keys of the object same as above.
{% endhint %}

* `statisticsHeading`  -> Accepts a string value, used as the section heading.
* `statisticsHeadingAbout`  -> Accepts a string value, used as the section paragraph content.
* `imgSrc`  -> Accepts a string value, source link for the image shown in the statistics section.
* `imgState`  -> Accepts a boolean value, to show or hide the image based on user input.
* `imgAlt`-> Accepts an image alt.
* `id` -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.
* `imgLoad` -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".
* `userStatisticsStyle`  -> Accepts class name(s) as string, custom styling prop for the full section container.
* `userStatsContentStyle`  -> Accepts class name(s) as string, custom styling prop for the container containing heading, paragraph and statistics data content.
* `userStatsBlocksStyl`e  -> Accepts class name(s) as string, custom styling prop for the container containing statistics data.

{% tabs %}
{% tab title="Default" %}

```jsx
import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics></Statistics>
    </>
  )
}

export default App
```

{% endtab %}

{% tab title="With Custom Props" %}
{% code overflow="wrap" %}

```jsx
// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Statistics } from "react-hartan"

function App() {

  return (
    <>
      <Statistics userStatsBlocksStyle={"bg-red"} userStatsContentStyle={"bg-pink"}></Statistics>
    </>
  )
}

export default App
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Component Code

This is the code for the Statistics component.

{% tabs %}
{% tab title="Statistics.jsx" %}
{% code overflow="wrap" %}

```jsx
import statisticsStyle from "./Statistics.module.css"
import PropTypes from "prop-types"

const list = [
    {
        head: "Users",
        data: "2.7K"
    },
    {
        head: "Subscribers",
        data: "2.1K"
    },
    {
        head: "Downloads",
        data: "45+"
    },
    {
        head: "Products",
        data: "5+"
    },
];

export default function Statistics({ statsBlockData = list, statisticsHeading = "Hartan", statisticsHeadingAbout = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium libero architecto ipsum nostrum impedit similique neque mollitia dolores quasi autem cum ea, quas aspernatur? Deserunt.", imgSrc = "https://dummyimage.com/500x250", imgState = true, imgAlt= "Hartan", id, imgLoad, userStatisticsStyle, userStatsContentStyle, userStatsBlocksStyle }) {

    return (
        <section className={`${statisticsStyle.statistics} ${userStatisticsStyle}`}>
            <div className={`${statisticsStyle.abtStats} ${userStatsContentStyle}`}>
                <div>
                    <h1>{statisticsHeading}</h1>
                    <p>{statisticsHeadingAbout}</p>
                </div>
                <div className={`${statisticsStyle.statsBlocks} ${userStatsBlocksStyle}`}>
                    {
                        statsBlockData.map((item, id) => {
                            return (
                                <div key={id}>
                                    <h2>{item.data}</h2>
                                    <p>{item.head}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            {
                imgState &&
                <figure>
                    <img src={imgSrc} alt={imgAlt} loading={imgLoad}/>
                </figure>
            }

        </section>
    )
}

Statistics.propTypes = {
    statsBlockData: PropTypes.arrayOf(PropTypes.shape({
        head: PropTypes.node,
        data: PropTypes.node
    })),
    statisticsHeading: PropTypes.node,
    statisticsHeadingAbout: PropTypes.node,
    imgSrc: PropTypes.string,
    imgState: PropTypes.bool,
    imgAlt: PropTypes.string,
    id: PropTypes.string,
    userStatisticsStyle: PropTypes.string,
    userStatsContentStyle: PropTypes.string,
    userStatsBlocksStyle: PropTypes.string
};
```

{% endcode %}
{% endtab %}

{% tab title="Statistics.module.css" %}
{% code overflow="wrap" %}

```css
/*  Statistics Styling */

/* statistics section container */
.statistics {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 5rem;
    padding: 1rem 5rem;
}

/* statistics div container */
.abtStats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 5rem;
}

.abtStats div h1 {
    font-size: 3rem;
}

.abtStats div p {
    font-size: 1.3rem;
    font-weight: 500;
    color: #6b6868;
}

/* statistics data container */
.statsBlocks {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.statsBlocks div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.statsBlocks div h2 {
    font-size: 2rem;
}

/* Responsive Design */
@media (max-width:1024px) {
    .statistics {
        flex-direction: column;
    }
}

@media (max-width: 768px) {

    .abtStats {
        flex-direction: column;
    }

    .statistics figure img {
        height: 20rem;
    }
}

@media (max-width: 460px) {
    .statistics figure img {
        height: 10rem;
    }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}