<commit_before>![](/src/assets/uxgraph.png =250x)

# vuejs-d3-uxgraph

> Vue wrapper for d3.js predesigned somponents

> *Please,note:* library is still in the development mode! 

[![npm version](https://badge.fury.io/js/ux-graph.svg)](https://badge.fury.io/js/ux-graph)
[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ux-graph)

## Live demo and code example

- Demo: https://lirael.github.io/vuejs-d3-uxgraph-demo/
- Code: https://github.com/lirael/vuejs-d3-uxgraph-demo/

## Principles used to design the graphs

All designs are based on recommendations of <NAME> described in a book "Information Dashboard Design".

## How to use with npm 

[![NPM](https://nodei.co/npm/ux-graph.png?downloads=true&downloadRank=true)](https://nodei.co/npm/ux-graph/)

Firstly you need to create Vue wrapper component. Exaple of `SparklinesBase.vue`:

```javascript
<template>
  <div class="svg-container" id="sCanvas"></div>
</template>

<script>
import { Sparklines } from 'ux-graph'

  export default Sparklines.extend({
    mounted () {
      // Overwriting base render method with actual data
      this.createSparkline('#sCanvas', this.data, this.label, this.circle, this.color)
    }
  })
</script>
```
Then in other your components you can sumply use it as follows:

```javascript
import Sparklines from './SparklinesBase.vue'
export default {
  name: 'SparklinesContainer',
  components: {
    'sparklines': Sparklines
  }
  [...]
```

and call it anywhere in the template using:
```
<sparklines> </sparklines>
```

## Manual integration

If you want to integrate some component manualy, and not via `npm`, it is needed to import components with a needed graph (graph components are located in `src/components/`. Then you can use it as usual Vue instance, and pass custom parameters when needed. Though `npm` usage is strongly recommended.

```javascript
import barcharts from './Barcharts.vue'
export default {
  name: 'barcharts',
  components: {
    'barcharts': barcharts
  }
[...]
```

And to use it in a template:
```javascript
<barcharts
    colorOne="#4682B4" 
    labelOne="Success" 
    colorTwo="#d3d3d3" 
    labelTwo="Fail">
</barcharts>
```

Result is as follows:

![](/src/assets/bar.png)

## Available graphs
More graphs would be added during the next stage

### Sparklines
![](/src/assets/sparklines.png =300x)

### Line chart
![Line](/src/assets/line.png =300x)

### Vertical Bar charts
![](/src/assets/bar.png =300x)

### Horizontal Bar charts
![](/src/assets/hbars.png =300x)

## Contributing

1. Fork it ( https://github.com/lirael/vuejs-d3-uxgraph/fork )
2. Create new branch for your feature (`git checkout -b new-feature`)
3. Commit your changes (`git commit -m 'Feature description'`)
4. Push to the branch (`git push origin new-feature`)
5. Create a new Pull Request

Thanks!

## License
<commit_msg>instructions re-written<commit_after><div align="center">
   <img width="256" heigth="256" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/uxgraph.png" alt="uxgraph logo">
</div>

# vuejs-d3-uxgraph

> Vue wrapper for d3.js predesigned somponents

> *Please,note:* library is still in the development mode!!!

[![npm version](https://badge.fury.io/js/ux-graph.svg)](https://badge.fury.io/js/ux-graph)
[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ux-graph)

## Live demo and code example

- Demo: https://lirael.github.io/vuejs-d3-uxgraph-demo/
- Code: https://github.com/lirael/vuejs-d3-uxgraph-demo/

## Principles used to design the graphs

All designs are based on recommendations of <NAME> described in a book "Information Dashboard Design".

## How to use with npm 

[![NPM](https://nodei.co/npm/ux-graph.png?downloads=true&downloadRank=true)](https://nodei.co/npm/ux-graph/)

Firstly you need to create Vue wrapper component. Exaple of `SparklinesBase.vue`:

```javascript
<template>
  <div class="svg-container" id="sCanvas"></div>
</template>

<script>
import { Sparklines } from 'ux-graph'

  export default Sparklines.extend({
    mounted () {
      // Overwriting base render method with actual data
      this.createSparkline('#sCanvas', this.data, this.label, this.circle, this.color)
    }
  })
</script>
```
Then in other your components you can sumply use it as follows:

```javascript
import Sparklines from './SparklinesBase.vue'
export default {
  name: 'SparklinesContainer',
  components: {
    'sparklines': Sparklines
  }
  [...]
```

and call it anywhere in the template using:
```
<sparklines> </sparklines>
```

## Manual integration

If you want to integrate some component manualy, and not via `npm`, it is needed to import components with a needed graph (graph components are located in `src/components/`. Then you can use it as usual Vue instance, and pass custom parameters when needed. Though `npm` usage is strongly recommended.

```javascript
import barcharts from './Barcharts.vue'
export default {
  name: 'barcharts',
  components: {
    'barcharts': barcharts
  }
[...]
```

And to use it in a template:
```javascript
<barcharts
    colorOne="#4682B4" 
    labelOne="Success" 
    colorTwo="#d3d3d3" 
    labelTwo="Fail">
</barcharts>
```

Result is as follows:

<div align="center">
   <img width="300" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/bar.png?raw=true" alt="uxgraph logo">
</div>

## Available graphs
More graphs would be added during the next stage

### Sparklines
<div align="center">
   <img width="300" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/sparklines.png?raw=true" alt="uxgraph logo">
</div>

### Line chart
<div align="center">
   <img width="300" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/line.png?raw=true" alt="uxgraph logo">
</div>

### Vertical Bar charts
<div align="center">
   <img width="300" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/bar.png?raw=true" alt="uxgraph logo">
</div>

### Horizontal Bar charts
<div align="center">
   <img width="300" src="https://github.com/lirael/vuejs-d3-uxgraph/blob/master/src/assets/hbars.png?raw=true" alt="uxgraph logo">
</div>

## Contributing

1. Fork it ( https://github.com/lirael/vuejs-d3-uxgraph/fork )
2. Create new branch for your feature (`git checkout -b new-feature`)
3. Commit your changes (`git commit -m 'Feature description'`)
4. Push to the branch (`git push origin new-feature`)
5. Create a new Pull Request

Thanks!

## License

{'fraction_non_alphanumeric': 0.15229131306897084, 'fraction_numerical': 0.01203517975621046, 'mean_word_length': 4.210610932475884, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, 'https://': 24, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7601249', 'n_tokens_mistral': 2265, 'n_tokens_neox': 2134, 'n_words': 601}