How to use the vue-types.array function in vue-types
To help you get started, we’ve selected a few vue-types examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Waavi / vue-wcharts / src / components / Axis2 / axisMixin.js View on Github 
export default {
type: 'axis',
dimension: undefined, // 'x', 'y', 'z', 'radial', 'angle'
inject: ['Chart'],
mixins: [themeMixin],
props: {
// Settings
id: VueTypes.string.isRequired,
type: VueTypes.oneOf(AXIS_TYPE_LIST).isRequired,
reversed: VueTypes.bool.def(false),
allowDuplicatedCategory: VueTypes.bool.def(false), // http://recharts.org/en-US/examples/LineChartHasMultiSeries
datakey: VueTypes.string.optional,
invisible: VueTypes.bool.def(false),
domain: VueTypes.array.def([]),
bounds: VueTypes.array.def([]),
padding: VueTypes.object.def({}), // space between axis edges and bounds region
// Ticks
ticks: VueTypes.array.optional,
numTicks: VueTypes.number.def(8),
exactNumTicks: VueTypes.number.optional,
tickFormatter: VueTypes.func.def(value => value),
// Label
label: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
]).optional,
labelFontSize: VueTypes.number.def(12),
grid: VueTypes.oneOfType([mixins: [themeMixin],
props: {
index: VueTypes.number.isRequired,
cartesianIndex: VueTypes.number.isRequired,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
x: VueTypes.number.isRequired,
y: VueTypes.number.isRequired,
fill: VueTypes.string,
stroke: VueTypes.string,
strokeWidth: VueTypes.number,
radius: VueTypes.number,
hoverRadius: VueTypes.number,
info: VueTypes.shape({
id: VueTypes.any,
label: VueTypes.any,
value: VueTypes.array,
}).loose,
styles: VueTypes.object.def({}),
transition: VueTypes.string.isRequired,
},
computed: {
dotStyles () {
return {
...this.themeStyles.styles,
...this.styles,
...(this.trigger === 'click' ? { cursor: 'pointer' } : {}),
}
},
// Event Listeners
dotListeners () {
return merge({}, this.$listeners, {
click: (event) => {}
export default {
type: 'axis',
dimension: undefined, // 'x', 'y', 'z', 'radial', 'angle'
inject: ['Chart'],
mixins: [themeMixin],
props: {
// Settings
id: VueTypes.string.isRequired,
type: VueTypes.oneOf(AXIS_TYPE_LIST).isRequired,
reversed: VueTypes.bool.def(false),
allowDuplicatedCategory: VueTypes.bool.def(false), // http://recharts.org/en-US/examples/LineChartHasMultiSeries
datakey: VueTypes.string.optional,
invisible: VueTypes.bool.def(false),
domain: VueTypes.array.def([]),
bounds: VueTypes.array.def([]),
padding: VueTypes.object.def({}), // space between axis edges and bounds region
// Ticks
ticks: VueTypes.array.optional,
numTicks: VueTypes.number.def(8),
exactNumTicks: VueTypes.number.optional,
tickFormatter: VueTypes.func.def(value => value),
// Label
label: VueTypes.oneOfType([
VueTypes.string,
VueTypes.arrayOf(VueTypes.string),
]).optional,
labelFontSize: VueTypes.number.def(12),type: 'cartesian',
inject: ['Chart'],
mixins: [themeMixin],
props: {
x: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).optional,
y: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).optional,
borderSpacing: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number)]).def([0, 0, 0, 0]),
label: VueTypes.string.def(''),
labelAlign: VueTypes.oneOf(['start', 'end']).def('end'),
styles: VueTypes.object.def({}),
labelStyles: VueTypes.object,
trigger: VueTypes.oneOf(['hover', 'click', 'manual']).def('hover'),
info: VueTypes.shape({
id: VueTypes.any,
label: VueTypes.any,
value: VueTypes.array,
}).loose,
},
computed: {
scaledX () {
if (Array.isArray(this.x) && this.x.length === 2) {
return this.x.map(x => this.getScaledValue({ value: x, isX: true, isCategory: !this.Chart.scatter })).sort()
}
if (this.x !== undefined) {
return this.getScaledValue({ value: this.x, isX: true, isCategory: !this.Chart.scatter })
}
return undefined
},
scaledY () {
if (Array.isArray(this.y) && this.y.length === 2) {
return this.y.map(y => this.getScaledValue({ value: y, isX: false, isCategory: false })).sort()
}import scaleLinear from 'd3-scale/src/linear'
import stack from 'd3-shape/src/stack'
import stackOffsetDiverging from 'd3-shape/src/offset/diverging'
import noop from 'lodash.noop'
import { bound } from '../../utils/maths'
import merge from '../../utils/merge'
import chartMixin from '../../mixins/chart'
export default {
name: 'WCartesian',
mixins: [chartMixin],
props: {
scatter: VueTypes.bool.def(false),
bound: VueTypes.array.def([]),
xBound: VueTypes.array.def([]),
gap: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number).def([0, 0, 0, 0])]).def(0),
},
data () {
return {
axis: {
x: {
datakey: null,
name: null,
numTicks: null,
},
y: {
datakey: null,
name: null,
numTicks: null,
},
z: {import VueTypes from 'vue-types'
import { colors, theme } from '../config'
export default {
props: {
colors: VueTypes.array.def(() => colors),
},
data () {
const { name } = this.$options
return {
themeStyles: theme[name] || {},
}
},
}import VueTypes from 'vue-types'
import scaleLinear from 'd3-scale/src/linear'
import stack from 'd3-shape/src/stack'
import stackOffsetDiverging from 'd3-shape/src/offset/diverging'
import noop from 'lodash.noop'
import { bound } from '../../utils/maths'
import merge from '../../utils/merge'
import chartMixin from '../../mixins/chart'
export default {
name: 'WCartesian',
mixins: [chartMixin],
props: {
scatter: VueTypes.bool.def(false),
bound: VueTypes.array.def([]),
xBound: VueTypes.array.def([]),
gap: VueTypes.oneOfType([VueTypes.number, VueTypes.arrayOf(VueTypes.number).def([0, 0, 0, 0])]).def(0),
},
data () {
return {
axis: {
x: {
datakey: null,
name: null,
numTicks: null,
},
y: {
datakey: null,
name: null,
numTicks: null,
},
