# Graphs

## Line Graph

Takes props:

- title
- data

Sample:

```javascript
const line = {
    id: "nearst-shop-view",
    type: "line",
    title: "Total visits (30 days)",
    subtitle: "Daily visits of your near.st shop page.",
    totalTitle: "visits",
    weight: 1,
    cacheDuration: 43200,
    isCached: true,
    isPlusOnly: false,
    tags: [
        "nearst",
        "shop",
        "basic"
    ],
    previousTotal: 100,
    data: [
        [
            "Total visits (30 days)",
            [
                [
                    "20191108",
                    18
                ],
                [
                    "20191109",
                    2
                ],
                [
                    "20191110",
                    12
                ],
                ...
            ]
        ]
    ]
}

```


## Number Graph

Takes props:

- title
- data

Sample data:

```javascript

const number = {
    cacheDuration: 43200,
    data: 83154,
    id: "googleads-impressions",
    isCached: true,
    isPlusOnly: true,
    subtitle: "Number of people that saw your products on Google in the last 30 days.",
    tags: ["plus", "googleads"],
    title: "Product views (30 days)",
    type: "number",
    weight: 1
}
```

## Number Extra Graph

Takes props:

- title
- data

Sample data:

```javascript
const numberExtra = {
    cacheDuration: 43200,
    data: 293,
    id: "googleads-impressions",
    isCached: true,
    isPlusOnly: true,
    subtitle: "Number of people that saw your products on Google in the last 30 days.",
    tags: ["plus", "googleads"],
    title: "Directions clicks",
    type: "number",
    weight: 1,
    fields: [{
        title: 'All time',
        subtitle: 'Total number of people that ever clicked directions on your ads.',
        data: 3924
    }]
}

```

## Line Fill Graph

Takes props:

- title
- data

Sample data:

```javascript

const lineFill = {
    id: "nearst-shop-view",
    type: "line",
    title: "Total visits (30 days)",
    subtitle: "Daily visits of your near.st shop page.",
    weight: 1,
    cacheDuration: 43200,
    isCached: true,
    isPlusOnly: false,
    tags: [
        "nearst",
        "shop",
        "basic"
    ],
    fillColour: '#62a3f9',
    data: [
        [
            "Total visits (30 days)",
            [
                [
                    "20191108",
                    18
                ],
                [
                    "20191109",
                    2
                ],
                [
                    "20191110",
                    12
                ],
                ...
            ]
        ]
    ]
}

```

## Block Graph

Takes props:

- title
- data

Sample data:

```javascript

const block = {
    id: "total-spend",
    type: "block",
    title: "Daily PLUS spend",
    subtitle: "Daily PLUS spend across all locations",
    weight: 1,
    cacheDuration: 43200,
    isCached: true,
    isPlusOnly: false,
    tags: [
        "nearst",
        "shop",
        "plus"
    ],
    fillColour:"#2a328c",
    totalTitle:"Daily PLUS spend",
    currency: "£",
    data: [
        [
            "PLUS total",
            [
                [
                  "Wed Jun 17 2020",
                  40
                ],
                [
                  "Thu Jun 18 2020",
                  40
                ],
                ...
              ]
        ]
    ]
}
```