Skip to content
This repository has been archived by the owner on Feb 15, 2022. It is now read-only.

Commit

Permalink
update readme + build assets
Browse files Browse the repository at this point in the history
  • Loading branch information
@smknstd
smknstd committed Jun 7, 2020
1 parent 7554831 commit 99a8823
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 129 deletions.
122 changes: 22 additions & 100 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,111 +40,33 @@ Vue.use(Bars)

[vuetrend](https://www.npmjs.org/package/vuetrend) - 📈 Simple, elegant spark lines

## API

#### SVG Props

By default, all properties not recognized by Vue Bars will be delegated to the SVG. The line inherits these properties if none of its own override them.

Additionally you can use the following properties to customize your bar graph further:

```
- rounding // specify how round your bars should be
- barWidth // specify how wide your bars should be
```

#### `data`
| Type | Required | Default |
|-----------------|----------|-------------|
| [Number\|Object] | ✓ | `undefined` |

The data accepted by Vue Bars is incredibly simple: An array of y-axis values to graph.

Vue Bars takes care of normalization, so don't worry about ensuring the data is in a specific range.

This does mean that all data points will be evenly-spaced. If you have irregularly-spaced data, it will not be properly represented.

As of v1.2.0, you may supply an array of data objects with a `value` property.

###### Example
```vue
<bars :data="[120, 149, 193.4, 200, 92]" />
<bars :data="[{ value: 4 }, { value: 6 }, { value: 8 }]" />
```


#### `gradient`
| Type | Required | Default |
|----------|----------|-------------|
| [String] | ✕ | `undefined` |

Vue Bars supports vertical gradients. It accepts an array of 2 colour values, and will fade evenly between them from left to right.

Colour should be specified as a full HEX value.

###### Example
```vue
<bars :gradient="['#00FFFF', '#FF00FF']" />
```
## Props

| Name | Type | Default | Description | Example |
| ----------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| data | Number\|Object | `undefined` | The data accepted by Vue Bars is incredibly simple: An array of y-axis values to graph. | `[120, 149, 193.4, 200, 92]` or `[{ value: 4 }, { value: 6 }, { value: 8 }]` |
| gradient | String | `['#000']` | Colour can be specified as any SVG-supported format (named, rgb, hex, etc). | `['#0FF', '#F0F', '#FF0']` |
| width | Number | auto | Set an explicit width for your SVG. | - |
| height | Number | auto | Set an explicit height for your SVG. | - |
| padding | Number | `8` | If you set a very large `strokeWidth` on your line, you may notice that it gets "cropped" towards the edges. | - |
| rounding | Number | `2` | To control radius on each bar's corners | - |
| barWidth | Number | `4` | Set width of each bar | - |
| labelRotate | Number | `-45` | To control rotation of labels | - |
| labelSize | Number | `0.7` | To control size of labels | - |
| labelColor | String | `#999` | To control color of labels | - |
| labelData | String | `[]` | Array of strings | `['label1','label2','label3']` |
| minBarHeight | Number | `3` | Minimum height | - |
| autoDraw | Boolean | `false` | Allow the line to draw itself on mount. Set to `true` to enable, and customize using `autoDrawDuration` and `autoDrawEasing`. | - |
| growDuration | Number | `0.5` | The amount of time, in seconds, that the autoDraw animation should span. This prop has no effect if `autoDraw` isn't set to `true`. | - |
| max | Number | `-Infinity` | Specify max value | - |
| min | Number | `Infinity` | Specify min value, This is useful if you have multiple lines. See [#8](https://github.com/QingWei-Li/vue-trend/issues/8) | - |

#### `height`
| Type | Required | Default |
|----------|----------|-------------|
| Number | ✕ | `undefined` |

Set an explicit height for your SVG. By default it ensures a 1:4 aspect ratio with the width, and the width expands to fill the container.

Note that in _most_ cases it is sufficient to leave this blank, and just control the size of the parent container.

###### Example
```vue
<bars :width="200" :height="200" />
```


#### `padding`
| Type | Required | Default |
|----------|----------|-------------|
| Number | ✕ | `8` |

If you set a very large `strokeWidth` on your line, you may notice that it gets "cropped" towards the edges. This is because SVGs don't support overflow.

By increasing this number, you expand the space around the line, so that very thick lines aren't cropped.

In most cases you don't need to touch this value.

###### Example
```vue
<bars padding="18" />
```

#### `width`
| Type | Required | Default |
|----------|----------|-------------|
| Number | ✕ | `undefined` |

Set an explicit width for your SVG. By default it ensures a 1:4 aspect ratio with the height, expanding to fill the width of the container.

Note that in _most_ cases it is sufficient to leave this blank, and just control the width of the parent container.

###### Example
```vue
<bars :width="200" :height="200" />
```

## Labels
#### SVG Props

You can pass an array of objects as data value, and give your labels a `title`. On hover, the label will be displayed.
By default, all properties not recognized by Vue Bars will be delegated to the SVG. The line inherits these properties if none of its own override them.

```vue
<bars
:data="[{value: 0, title: ''}, {value: 1, title: 'test1'}, {value: 5, title: 'test5'}, {value: 2, title: 'test2'}, {value: 1, title: 'test1'}]"
:gradient="gradient"
:barWidth="5"
:growDuration="1">
</bars>
```

## On-the-fly reloading

Expand Down
22 changes: 15 additions & 7 deletions dist/vue-bars.common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ function genPoints (inArr, ref, ref$1, hasLabels) {
function genBars (_this, arr, h) {
var ref = _this.boundary;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelColor = ref.labelColor;
var labelSize = ref.labelSize;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
Expand Down Expand Up @@ -204,7 +208,7 @@ function genLabels (_this, arr, labels, h) {
}

var Path = {
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
props: ['data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],

render: function render (h) {
var ref = this;
Expand Down Expand Up @@ -244,6 +248,10 @@ var Bars = {
type: Number,
default: 8
},
rounding: {
type: Number,
default: 2
},
growDuration: {
type: Number,
default: 0.5
Expand Down Expand Up @@ -272,14 +280,14 @@ var Bars = {
type: Number,
default: -45
},
labelColor: {
type: String,
default: '#999'
},
labelSize: {
type: Number,
default: 0.7
},
labelColor: {
type: String,
default: '#999999'
},
height: Number,
width: Number,
padding: {
Expand Down Expand Up @@ -310,8 +318,8 @@ var Bars = {
maxY: viewHeight - padding,
labelData: this.labelData,
labelRotate: this.labelRotate,
labelSize: this.labelSize,
labelColor: this.labelColor
labelColor: this.labelColor,
labelSize: this.labelSize
};
var props = this.$props;

Expand Down
22 changes: 15 additions & 7 deletions dist/vue-bars.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,10 @@ function genPoints (inArr, ref, ref$1, hasLabels) {
function genBars (_this, arr, h) {
var ref = _this.boundary;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelColor = ref.labelColor;
var labelSize = ref.labelSize;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
Expand Down Expand Up @@ -202,7 +206,7 @@ function genLabels (_this, arr, labels, h) {
}

var Path = {
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
props: ['data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],

render: function render (h) {
var ref = this;
Expand Down Expand Up @@ -242,6 +246,10 @@ var Bars = {
type: Number,
default: 8
},
rounding: {
type: Number,
default: 2
},
growDuration: {
type: Number,
default: 0.5
Expand Down Expand Up @@ -270,14 +278,14 @@ var Bars = {
type: Number,
default: -45
},
labelColor: {
type: String,
default: '#999'
},
labelSize: {
type: Number,
default: 0.7
},
labelColor: {
type: String,
default: '#999999'
},
height: Number,
width: Number,
padding: {
Expand Down Expand Up @@ -308,8 +316,8 @@ var Bars = {
maxY: viewHeight - padding,
labelData: this.labelData,
labelRotate: this.labelRotate,
labelSize: this.labelSize,
labelColor: this.labelColor
labelColor: this.labelColor,
labelSize: this.labelSize
};
var props = this.$props;

Expand Down
26 changes: 17 additions & 9 deletions dist/vue-bars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global['vue-bars'] = factory());
}(this, function () { 'use strict';
}(this, (function () { 'use strict';

function transitionColor (from, to, count) {
count = count + 1;
Expand Down Expand Up @@ -108,6 +108,10 @@
function genBars (_this, arr, h) {
var ref = _this.boundary;
var maxX = ref.maxX;
var maxY = ref.maxY;
var labelRotate = ref.labelRotate;
var labelColor = ref.labelColor;
var labelSize = ref.labelSize;
var totalWidth = (maxX) / (arr.length - 1);
if (!_this.barWidth) {
_this.barWidth = totalWidth - (_this.padding || 5);
Expand Down Expand Up @@ -208,7 +212,7 @@
}

var Path = {
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
props: ['data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],

render: function render (h) {
var ref = this;
Expand Down Expand Up @@ -248,6 +252,10 @@
type: Number,
default: 8
},
rounding: {
type: Number,
default: 2
},
growDuration: {
type: Number,
default: 0.5
Expand Down Expand Up @@ -276,14 +284,14 @@
type: Number,
default: -45
},
labelColor: {
type: String,
default: '#999'
},
labelSize: {
type: Number,
default: 0.7
},
labelColor: {
type: String,
default: '#999999'
},
height: Number,
width: Number,
padding: {
Expand Down Expand Up @@ -314,8 +322,8 @@
maxY: viewHeight - padding,
labelData: this.labelData,
labelRotate: this.labelRotate,
labelSize: this.labelSize,
labelColor: this.labelColor
labelColor: this.labelColor,
labelSize: this.labelSize
};
var props = this.$props;

Expand Down Expand Up @@ -348,4 +356,4 @@

return Bars;

}));
})));
Loading

0 comments on commit 99a8823

Please sign in to comment.