# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hartans-organization.gitbook.io/hartan-docs/components/statistics.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.