# @dpc-sdp/myvic-data-driven-component

> **This is a "@dpc-sdp/ripple-nuxt-tide" submodule, for Single Digital Presence projects use only.**

Latest version **2.2.13** (published 2023-01-06) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @dpc-sdp/myvic-data-driven-component
pnpm add @dpc-sdp/myvic-data-driven-component
yarn add @dpc-sdp/myvic-data-driven-component
bun add @dpc-sdp/myvic-data-driven-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.13 |
| Published | 2023-01-06 |
| First published | 2020-07-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 29.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | waitingallday, alan-cole, sdp.devs, b-schiller, xgaitanis, deloitte-drupal-support |

## Links

- npm: https://www.npmjs.com/package/@dpc-sdp/myvic-data-driven-component
- Repository: https://github.com/dpc-sdp/myvictoria-vic-gov-au/tree/master/packages/data-driven-component
- npm.io page: https://npm.io/package/@dpc-sdp/myvic-data-driven-component

## Dependencies (10)

- [@dpc-sdp/myvic-treemap](https://npm.io/package/@dpc-sdp/myvic-treemap.md) 2.2.13
- [@dpc-sdp/myvic-map-core](https://npm.io/package/@dpc-sdp/myvic-map-core.md) 2.2.13
- [@dpc-sdp/myvic-bar-chart](https://npm.io/package/@dpc-sdp/myvic-bar-chart.md) 2.2.13
- [@dpc-sdp/myvic-pie-chart](https://npm.io/package/@dpc-sdp/myvic-pie-chart.md) 2.2.13
- [@dpc-sdp/myvic-areasearch](https://npm.io/package/@dpc-sdp/myvic-areasearch.md) 2.2.13
- [@dpc-sdp/myvic-data-block](https://npm.io/package/@dpc-sdp/myvic-data-block.md) 2.2.13
- [@dpc-sdp/myvic-line-chart](https://npm.io/package/@dpc-sdp/myvic-line-chart.md) 2.2.13
- [@dpc-sdp/myvic-toggle-list](https://npm.io/package/@dpc-sdp/myvic-toggle-list.md) 2.2.13
- [@dpc-sdp/myvic-autocomplete](https://npm.io/package/@dpc-sdp/myvic-autocomplete.md) 2.2.13
- [@dpc-sdp/myvic-addresssearch](https://npm.io/package/@dpc-sdp/myvic-addresssearch.md) 2.2.13

## Recent versions

- 2.2.13 (latest) — 2023-01-06
- 1.4.2-next.0 (dev) — 2020-10-08
- 2.2.12-alpha.0 — 2022-12-22
- 2.2.11 — 2022-11-03
- 2.2.10 — 2022-09-02
- 2.2.9 — 2022-08-31
- 2.2.7 — 2022-08-09
- 2.2.6 — 2021-12-02
- 2.2.2 — 2021-08-16
- 2.2.1 — 2021-08-16
- 2.2.0 — 2021-08-06
- 2.1.0 — 2021-08-02
- 2.0.4 — 2021-07-23
- 2.0.2 — 2021-07-22
- 1.9.11 — 2021-06-30
- … 32 more at https://npm.io/package/@dpc-sdp/myvic-data-driven-component/versions

## README

# Data-Driven Component

**This is a "@dpc-sdp/ripple-nuxt-tide" submodule, for Single Digital Presence projects use only.**

A module to allow editors in SDP Tide CMS to add charts/maps into a content page.

## Install

```shell
npm install @dpc-sdp/myvic-data-driven-component --save
```

## Usage

In SDP project "tide.config.js"(it should be found in SDP site project root "/tide/tide.config.js"), add module as below example.

```
const tideConfig = {
  nodeModules: [
    '@dpc-sdp/myvic-data-driven-component'
  ]
}
```

## Add your own charts/maps

To add custom components, set `customComponents` to `true`.

```JS
const tideConfig = {
  nodeModules: [
    ['@dpc-sdp/myvic-data-driven-component', { customComponents: true }]
  ]
}
```

Then add a file "/tide/data-driven-component-loader.js" to map and load your custom components, as below example.

```JS
const loadComponent = (configs) => {
  let dataDrivenComp
  switch (configs.name) {
    case 'my_chart':
      dataDrivenComp = {
        name: () => import(/* webackChunkName: 'my-chart' */ '~/components/MyChart').then(m => m.MyChart)
      }
      break

    case 'myvic_barchart_demo_1':
      dataDrivenComp = {
        name: () => import(/* webackChunkName: 'myvic-bar-chart' */ '@dpc-sdp/myvic-bar-chart'),
        props: {
          title: 'test bar chart',
          data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [
              {
                label: 'Dataset 1',
                data: [40, 20, 12, 52, 10, 39]
              }
            ]
          }
        }
      }
      break
  }
  return dataDrivenComp
}

export default loadComponent
```

## Disable IE support

For components like map, we are not going to support IE browsers. To disable IE support, set `ieSupport` to `false` in the configuration.

```JS
case 'my_map':
  dataDrivenComp = {
    name: () => import(/* webackChunkName: 'my-map' */ '~/components/MyMap').then(m => m.MyMap),
    ieSupport: false
  }
  break
```

The map will not be rendered. A alert will be displayed to the user.

---
_Source: https://npm.io/package/@dpc-sdp/myvic-data-driven-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._